<template>
  <div class="order-list">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.status" placeholder="请选择订单状态" style="width: 200px;">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="待付款" :value="1"></el-option>
            <el-option label="待发货" :value="2"></el-option>
            <el-option label="待收货" :value="3"></el-option>
            <el-option label="已完成" :value="4"></el-option>
            <el-option label="已取消" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="searchForm.name" placeholder="请输入收货人"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表区域 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单列表</span>
        </div>
      </template>

      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="orderNo" label="订单编号" width="200"></el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="scope">
            {{ getStatusName(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="收货人"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="address" label="收货地址"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination 
          v-model:current-page="pagination.pageNo" 
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]" 
          :total="pagination.total" 
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import orderApi from '@/api/order'
import { type OrderAdminQueryType, type OrderAdminDTOType } from '@/api/order'

// 搜索表单
const searchForm = ref({
  status: 0,
  orderNo: '',
  name: '',
  phone: ''
})

// 分页参数
const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0
})

// 表格数据
const tableData = ref<OrderAdminDTOType[]>([])
const loading = ref(false)

// 获取订单列表
const getOrderList = async () => {
  loading.value = true
  const orderQuery: OrderAdminQueryType = {
    pageNo: pagination.value.pageNo,
    pageSize: pagination.value.pageSize,
    sortBy: 'createTime',
    isAsc: false,
    status: searchForm.value.status,
    orderNo: searchForm.value.orderNo,
    name: searchForm.value.name,
    phone: searchForm.value.phone
  }
  try {
    const res: any = await orderApi.getOrderList(orderQuery)
    tableData.value = res.data.data.list
    pagination.value.total = res.data.data.total
  } catch (error) {
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索订单
const handleSearch = () => {
  pagination.value.pageNo = 1
  getOrderList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    status: 0,
    orderNo: '',
    name: '',
    phone: ''
  }
  pagination.value.pageNo = 1
  getOrderList()
}

// 分页大小改变
const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val
  pagination.value.pageNo = 1
  getOrderList()
}

// 当前页改变
const handleCurrentChange = (val: number) => {
  pagination.value.pageNo = val
  getOrderList()
}

// 初始化加载数据
onMounted(() => {
  getOrderList()
})

// 辅助函数
const getStatusName = (status: number) => {
  switch (status) {
    case 1: return '待付款';
    case 2: return '待发货';
    case 3: return '待收货';
    case 4: return '已完成';
    case 5: return '已取消';
    default: return '';
  }
}
</script>

<style scoped>
.order-list {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>